<template>
  <view class="container">
    <!-- 个人信息公用组件，占位符 -->
    <view class="top-container">
      <top></top>
    </view>

    <!--  -->
    <view class="sub-container">
      <!-- 背景图 -->

      <img src="https://shenai-fducs.oss-cn-shanghai.aliyuncs.com/shenai_interface/beach_bg.png" class="background"
        mode="aspectFill" />

      <!--  -->
      <view class="news-container">
        <!-- info -->
        <view class="news-scroll-view-container">
          <view class="message-box" :class="{ anim: animate == true }">
            <view class="message-item" v-for="(item, index) in msgList" :key="index">
              <text style="color: #94ae65;margin-right: 5px;">{{item.pickTime.slice(11,16)}}</text>

              <text style="color: #cc6f6a">{{item.pickerName }}</text>
              捡到了
              <text style="color: #a675d0;">{{item.senderName}}</text>
              的漂流瓶
              <!-- {{item.receiver_name}} 收到一瓶{{item.gift_name}} -->
            </view>
          </view>
        </view>

      </view>

      <!-- 漂流瓶图片点击 -->




      <view class="bottle-click" @click="showPopup">
        <!-- <image src="/static/img///bottle-click-1.svg" class="bottle-click-img"></image> -->
        <uni-badge class="uni-badge-left-margin" absolute="rightTop" size="normal" :offset="[13, 13]">
          <!--          <uni-badge class="uni-badge-left-margin" :text="bottle_num" absolute="rightTop" size="normal"
            :offset="[13, 13]"> -->
          <image src="https://shenai-fducs.oss-cn-shanghai.aliyuncs.com/shenai_interface/bottle_new.gif"
            class="bottle-click-img"></image>
        </uni-badge>
      </view>
    </view>

    <!-- 弹出页面 -->
    <uni-popup ref="popup" type="center" :mask-click="true" class="popup">
      <view class="popup-container">
        <view class="popup-title">
          <text class="popup-title">你收到了一个漂流瓶</text>
        </view>
        <view class="popup-text-container">
          <!-- <text class="popup-text">你收到了{{bottle.sender}}</text>
          <text class="popup-text">赠送的{{bottle.gift_name}}</text> -->
        </view>
        <!--        <view class="popup-img-container">
          <image class="popup-img" :src="bottleImg"></image>
        </view> -->
        <!-- 祝福 -->
        <view class="popup-bless-container">
          <!-- 对方头像 -->
          <view class="img-left-container">
            <image src="/static/img/head-1.svg" class="img-left"></image>
          </view>
          <!-- 祝福 -->
          <view class="popup-bless-text-container">
            <text class="popup-bless-text">{{bottle.message}}</text>
          </view>
        </view>

        <!-- 祝福 -->
        <view class="popup-input-container">
          <!-- 祝福 -->
          <view class="popup-bless-input-container">
            <input v-model="inputText" class="popup-input" type="text" placeholder="请在这里输入寄语" :focus="false"></input>
          </view>
          <!-- 我头像 -->
          <view class="img-right-container">
            <image src="/static/img/head-2.svg" class="img-right"></image>
          </view>
        </view>

        <!-- 送给下一个 -->
        <!--        <view class="popup-select-container">
          <view class="select-text-container">
            <text class="popup-select-text">选择一个礼物，传递你的爱心吧</text>
          </view>
          <view class="data-select-container">
            <uni-data-select v-model="value" :localdata="convertedData" @change="change"></uni-data-select>
          </view>
        </view> -->



        <!-- button -->
        <view class="button-container">


          <view class="popup-button" @click="postBlessMsgs">
            <text class="button-text">接收并抽取血量</text>
          </view>
          <view class="popup-button gray-button" @click="clickToClose">
            <text class="button-text">扔回</text>
          </view>
        </view>

      </view>
    </uni-popup>


    <uni-popup ref="turntablesPop" :mask-click="false" type="center" >
      <view class="turntable">

        <Turntables ref="turntables" @beginBefore="beginBefore" @result="result" />




      </view>
    </uni-popup>
  </view>
</template>

<script>
  import top from "@/components/top.vue";
  import {
    getMsgs,
    getBottles,
    postMsgs,
    getOwned,
    getFileUrl
  } from "@/api/drift_bottle.js";
  import Turntables from "@/components/zbh-turntables/turntables-v2.vue"
  export default {
    components: {
      top,
      Turntables
    },
    data() {
      return {
        value: 0,
        bottleImg: "",
        bottle_num: 9,
        selectRange: [{
            value: 0,
            text: "小茗同学"
          },
          {
            value: 1,
            text: "维他柠檬茶"
          },
          {
            value: 2,
            text: "沁柠水"
          },
        ],
        // 轮播消息测试数据
        msgTestList: [
          '第一条消息',
          '第二条消息',
          '第三条消息',
          '第四条消息',
          '第五条消息',
          '第六条消息',
          '第七条消息',
          '第八条消息',
          '第九条消息',
          '第十条消息',
        ],
        // 真实数据
        msgList: [],
        turntablesList: {
          //转盘尺寸
          size: 500,
          //数据
          list: [{

            title: '0cc',
          }, {
            title: '10cc',
          }, {
            title: '20cc',
          }, {
            title: '30cc',
          }, {
            title: '40cc',
          }, {
            title: '50cc',
          }],
          //转动时间
          time: 3
        },
        // 捡到漂流瓶
        bottle: null,
        bottleLock: false,
        // 当前拥有的礼物
        giftListOption: [],
        convertedData: [],
        // 轮播当前索引
        currentIndex: 0,
        // 祝福语
        inputText: "",
        // 动画tag
        animate: false,
        userinfo: null,

      };
    },
    onLoad() {
      this.getNewMsgs();
      //如果地图界面打卡成功，弹出提示弹窗
      this.$nextTick(() => {
        this.$refs['turntables'].init(this.turntablesList)
      })

    },
    onShow() {
      this.userinfo = wx.getStorageSync('shenai_userInfo');
      this.isShowToast();

    },
    mounted() {
      setInterval(this.scrollMsg, 1500);
      // this.getOwnedGift();
    },
    methods: {

      beginBefore(num) {
        this.$refs['turntables'].begin(num)
        
      },
      result(e) {
        this.$refs.turntablesPop.close()
        uni.$emit('needRefresh', true)
      },
      isShowToast() {
        try {
          const result = wx.getStorageSync('isShowToast')
          if (result) {
            // 处理相关操作
            uni.showToast({
              title: `有个漂流瓶等你开启~`,
              icon: 'none',
              duration: 2000,
            });

            // 清除数据, 可以异步清除
            wx.removeStorage({
              key: 'isShowToast',
              success: (result) => {},
              fail: () => {},
              complete: () => {}
            })
          }
        } catch (error) {}


      },
      getUserInfo() {
        uni.$once('refreshUserinfo', (param) => {
          this.userinfo = wx.getStorageSync('shenai_userInfo')
          console.log(this.userinfo)
        })

      },

      convertData() {
        this.convertedData = this.giftListOption.map((item, index) => ({
          text: item.name,
          value: item.id
        }));
      },
      getNewMsgs() {
        getMsgs(10).then(res => {
          console.log("请求最新消息");
          console.log(res);
          this.msgList = res.data.data;
        })
      },
      async getNewBottles() {
        await getBottles().then(res => {
          console.log("请求未被接受的漂流瓶");
          console.log(res);
          this.bottle = res.data.data;

          // this.bottleImg = this.bottle.gift_url;
          // getFileUrl(this.bottle.gift_url).then(Urlres=>{
          //    this.bottleImg=Urlres;
          // })
        })
      },
      getOwnedGift() {
        getOwned().then(res => {
          console.log("请求礼物选项列表");
          console.log(res);
          this.giftListOption = res.data.data.gifts;
          this.convertData();
        });
      },
      postBlessMsgs() {
        if(!this.inputText){
          uni.showToast({
            title: `请输入寄语~`,
            icon: 'none'
          });
          return
        }

        const postData = {

          message: this.inputText,
          bottleIdUserPick: this.bottle.id
        };
        postMsgs(postData)
          .then(async res => {
            await this.getUserInfo();
            this.clickToClose()
            this.inputText = ""
            this.turntablesList.list = res.data.data.options.map(el => {

              return {
                title: el
              }

            })
            this.$refs['turntables'].init(this.turntablesList)

            this.openTurntables(res.data.data.blood)
           

            // console.log(res.data.status == 201);
            // if (res.data.status == 201) {
            //   uni.showToast({
            //     title: `您收到一瓶${this.bottle.gift_name}~请到个人信息页面兑换`,
            //     icon: 'none'
            //   });
            // }
            // if (res.data.status == 200) {
            //   uni.showToast({
            //     title: `您收到一瓶${res.data.data.gift}~请到个人信息页面兑换`,
            //     icon: 'none'
            //   });
            // }

            // 处理请求成功的响应数据
          })
          .catch(error => {
            console.error(error);
            // 处理请求失败的错误
          });
      },
      async showPopup() {
        // if (this.userinfo.bottles == 0) {
        //   uni.showToast({
        //     title: `打卡后才能收到漂流瓶~`,
        //     icon: 'none'
        //   });
        //   return
        // }
        if (this.bottleLock) return;
        this.bottleLock = true
        await this.getNewBottles();
        this.bottleLock = false
        if (!this.bottle) {
          uni.showToast({
            title: `您的漂流瓶次数已用完~`,
            icon: 'none'
          });
          return
        }

        // this.getOwnedGift();
        this.$refs.popup.open()
        uni.hideKeyboard()
      },
      clickToClose() {
        this.$refs.popup.close()
      },
      openTurntables(num) {


        let index = this.turntablesList.list.findIndex(el => el.title == num + "cc")
        console.log("openTurntables", num, index)
        this.$refs.turntablesPop.open()
        this.beginBefore(index)
         
      },
      change(e) {
        console.log("e:", e)
      },
      // async sendMsg() {
      //   let res = await this.postBlessMsgs()
      //   this.clickToClose()
      //   this.inputText = ""
      //   this.openTurntables(res.data.blood)
      // },
      scrollMsg() {
        this.animate = true;
        var that = this;
        setTimeout(() => {
          that.msgList.push(that.msgList[0]); // 将数组的第一个元素添加到数组末尾
          that.msgList.shift(); //删除数组的第一个元素
          that.animate = false; // margin-top 为0 的时候取消过渡动画，实现无缝滚动
        }, 300);
      },

    },
  }
</script>

<style lang="scss">
  .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
  }

  .top-container {
    top: 0rpx;
  }

  .container {
    height: 100vh;
  }

  .sub-container {
    display: flex;
    flex-direction: column;
    // justify-content: space-between;
  }


  .bottle-click {
    position: absolute;
    // bottom: 150rpx;
    bottom: 13vh;
    left: 30%;
    transform: translateX(-50%);
    z-index: 1;
  }

  .bottle-click-img {
    width: 200rpx;
    height: 200rpx;
  }

  .news-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    top: 20vh;
    margin-bottom: 150rpx;
  }

  .news-scroll-view-container {
    border-radius: 20rpx;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;

    height: 284rpx;
    width: 50vh;

    // font-family: SourceHanSansSC-Regular;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 5vw;
    letter-spacing: 0vw;
    color: black;

    //这个关键
    overflow: hidden;

  }

  .message-box {}

  .message-item {
    list-style: none;
    //这个也是关键，行高和item高度要一致才能显示完全
    color: #6a6a6a;
    font-size: 13px;
    line-height: 25px;
    height: 25px;
  }

  .anim {
    transition: all 0.5s;
    margin-top: -30px;
  }

  .news-title {
    font-size: 40rpx;
    margin-bottom: 20rpx;
    color: white;
  }

  .news-scroll-view {
    width: 600rpx;
    height: 300rpx;

  }

  .scroll-view-item {
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
    font-size: 18rpx;
  }

  .popup {

    width: 100vw;

  }

  .popup-container {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 20rpx;
    width: 550rpx;
    height: 500rpx;
    align-items: center;
    display: flex;
    flex-direction: column;
  }

  .popup-title {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20rpx;

  }

  .popup-icon {
    width: 50rpx;
    height: 50rpx;
    margin-right: 20rpx;
  }


  .popup-text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20rpx;
  }

  .popup-text {
    font-size: 28rpx;
    // text-decoration: underline;
    color: #EE8671;
  }

  .popup-img-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 200rpx;
  }

  .popup-bless-container {
    height: 100rpx;
    display: flex;
    flex-direction: row;
    // justify-content: center;
    align-items: center;

  }

  .popup-img {
    width: 200rpx;
    height: 200rpx;
  }

  .img-left-container {
    margin: 20rpx;
  }

  .img-left {
    width: 50rpx;
    height: 50rpx;
  }

  .popup-bless-text-container {
    border-radius: 20rpx;
    border: 2rpx solid #EE8671;
    width: 400rpx;
    height: 80rpx;
  }

  .popup-bless-text {
    font-size: 12px;
    margin: 10rpx;
  }

  .popup-input-container {
    height: 100rpx;
    display: flex;
    flex-direction: row;
    align-items: center;

  }

  .popup-bless-input-container {
    border-radius: 20rpx;
    border: 2rpx solid #EE8671;
    width: 430rpx;
    height: 80rpx;
    margin-left: 30rpx;
    margin-right: 15rpx;
  }

  .img-right {
    width: 50rpx;
    height: 50rpx;
  }

  .img-right-container {
    margin-right: 20rpx;
  }

  .popup-input {
    font-size: 12px;
    background-color: transparent;
    border: none;
    outline: none;
    margin: 10rpx;
  }

  .popup-select-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .popup-select-img {
    width: 80rpx;
    height: 80rpx;
    margin-bottom: 10rpx;
  }

  .popup-select-container {
    display: flex;
    flex-direction: column;
    margin: 40rpx;
    border: 2rpx solid #EE8671;
    border-radius: 20rpx;
    width: 500rpx;
    height: 150rpx;
  }

  .select-text-container {}

  .popup-select-text {
    font-size: 24rpx;
    margin: 20rpx;
    // text-decoration: underline;
  }

  .data-select-container {
    margin: 20rpx;
    width: 300rpx;
    font-size: 14px;
  }



  .button-container {
    display: flex;
    // flex-direction: column;
    align-items: center;
  }

  .popup-button {
    // width: 200rpx;
    padding: 0 30rpx;
    height: 60rpx;
    border-radius: 10rpx;
    background-color: #EE8671;
    font-size: 30rpx;
    margin: 30rpx 20rpx 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .gray-button {
    background-color: #ff9797 !important;
  }

  .button-text {
    color: #fff;
  }

  .turntables {
    background-color: transparent;
    border-radius: 20rpx;
    // width: 550rpx;
    // height: 650rpx;
    align-items: center;
    display: flex;
    flex-direction: column;
  }
</style>